import React,{Component} from "react"
import RightContainer from "../../../components/RightContainer"
import "./index.css"
import { Input, Space,Table } from 'antd';
const { Search } = Input;
class list extends Component{
    state={
        visible:false,
        vis:false,
    }
    iii=()=>{
        this.setState({
            visible:true
        })
    }
    ooo=()=>{
        this.setState({
            visible:false
        })
    }
    ppp=()=>{
        this.setState({
            vis:true,
            visible:false
        })
    }
    uuu=()=>{
        this.setState({
            vis:false
        })
    }
    state={
        columns:[
            {
              title: '分组名称',
              dataIndex: 'position',
              key: 'position',
            },
            {
              title: '启用',
              key: 'tags',
              dataIndex: 'tags',
              
            },
            {
              title: '创建时间',
              key: 'dispose',
              dataIndex: 'dispose',
              
            },
            {
              title: '操作',
              key: 'action',
              render: (text, record) => (
                <Space size="middle">
                  <a>编辑</a>
                </Space>
              ),
            },
          ],
          data:[
            {
              key: '1',
              tags: 'developer',
              position:"就黄果树",
              dispose:"ysgdsdc"
            },
            {
                key: '2',
                tags: 'developer',
                position:"就黄果树",
                dispose:"ysgdsdc"
            },
          ]
        
    }
    render(){
        const {visible,vis}=this.state
        const {data,columns}=this.state

        return <RightContainer>
            <div className="q2">
                <b className="q3">门店配置</b>
            </div>
            <div className="q4">
                <div className="q5">海报</div>
                <div className="q6">
                    <button className="q8" onClick={this.iii}>选择图片</button>
                    <div>
                    <img className="q9" src="//bpic.588ku.com/back_list_pic/21/07/23/0304f5b27092c431d298d2050f61b11b.jpg!/fw/630/quality/90/unsharp/true/compress/true" alt=""/>
                    </div>
                </div>
            </div>
            <button className="q7">提交</button>
            <div className="w1" style={ {display:visible?" block":"none"}  } >
                <div className="w2">
                    <div className="w3">
                        <div className="w5">
                            <button className="w7" onClick={this.ppp}>分组管理</button>
                            <button className="w7">上传图片</button>
                        </div>
                        <div className="w6">
                            <p></p>
                            <p>未分组</p>
                            <p>4</p>
                        </div>
                    </div>
                    <div className="w4">
                        <div className="w8">
                            <p></p>
                            <p>选择图片</p>
                            <Search placeholder="input search text" onSearch={this.onSearch} style={{ width: 200 }} />
                        </div>
                        <div className="w9">
                            <dl>
                                <dt ><img className="w0" src="https://img1.baidu.com/it/u=3950478358,1784532105&fm=26&fmt=auto" alt=""/></dt>
                                <dd>裤子</dd>
                            </dl>
                            <dl>
                                <dt ><img className="w0" src="https://img0.baidu.com/it/u=2370461032,3200836734&fm=26&fmt=auto" alt=""/></dt>
                                <dd>衣服</dd>
                            </dl>
                            <dl>
                                <dt ><img className="w0" src="https://img0.baidu.com/it/u=3778123662,4040907306&fm=26&fmt=auto" alt=""/></dt>
                                <dd>机器</dd>
                            </dl>
                            <dl>
                                <dt><img className="w0" src="https://img2.baidu.com/it/u=3574170964,1079159467&fm=26&fmt=auto" alt=""/></dt>
                                <dd>故障</dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <button className="q7" onClick={this.ooo}>确定</button>
            </div>
            <div className="e1" style={ {display:vis?" block":"none"}  } >
                <div className="e2">
                    <div className="r1">
                        <h1 onClick={this.uuu}>x</h1>
                        <div className="e3">分组管理</div>
                        <p></p>
                    </div>
                      <div className="e4">
                           <div className="e5">
                               <p className="e8"><button className="e0">新增</button></p>
                               <p className="e9"><Search placeholder="请输入名称" onSearch={this.onSearch} style={{ width: 200 }} /></p>
                           </div>
                           <div className="e6">
                           <Table columns={columns} dataSource={data} />
                           </div>
                        </div>
                </div>
            </div>
        </RightContainer>
    }
}
export default list